import React, { Suspense, useEffect, useState } from 'react';
import { Avatar, Dropdown, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import ProLayout, { PageContainer, SettingDrawer } from '@ant-design/pro-layout';
import { Switch, Route, useLocation, Link, useHistory } from 'react-router-dom';
import Breadcrumb from '@/components/breadcrumb';
import { useAppSelector } from '@/hooks/useStoreApi';
import { selectUserInfo, setUser } from '@/store/user';
import HomeContent from '@/components/homecontent';
import { useParsedRoutes, useRouteByPath } from '@/hooks/useRouteMenu';
import logo from '@/assets/img/logo.svg';
import menus from './menus';

const routes = menus.route!.routes!;

// Home主界面组件
export default () => {
  const [, availRoutes] = useParsedRoutes(routes);
  const location = useLocation();
  const history = useHistory();
  const currentRoute = useRouteByPath(routes, location.pathname);
  const user = useAppSelector(selectUserInfo);
  useEffect(() => {
    // 没有指定path时，总是跳到第一个路由地址
    if (location.pathname === '/') {
      history.replace(availRoutes[0].path || '/404');
    }
  });

  return (
    <div id='home-group'>
      <ProLayout
        logo={logo}
        route={menus.route}
        location={location}
        fixSiderbar
        title='理想汽车'
        headerContentRender={() => <Breadcrumb />}
        breadcrumbRender={() => [{ path: '/', breadcrumbName: '理想汽车' }, ...(currentRoute?.breadcrumb || [])]}
        menuItemRender={(item, dom) => <Link to={item.path || '/'}>{dom}</Link>}
        rightContentRender={() => (
          <div style={{ cursor: 'pointer' }} onClick={() => history.push('/login')} aria-hidden>
            <Avatar
              shape='circle'
              size='default'
              icon={user?.picture ? <img src={user.picture} alt='avatar' /> : <UserOutlined />}
            />
            <span style={{ color: '#333', marginLeft: '10px' }}>{user?.nickname || '点击登录'}</span>
          </div>
        )}
      >
        <HomeContent routes={menus.route!.routes!} />
      </ProLayout>
    </div>
  );
};
